<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">
      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            线上会议操作台
          </div>
          <div class="publicTable toLongTable">
            <div class="main-returns">
              <i class="el-icon-arrow-left" @click="returns()"></i>
              <span @click="returns()">返回</span>
            </div>
            <videoPlayer ref="videoPlayer" class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import onlinemeeting from "@/api/onlinemeeting";

import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";

export default {
  components: {
    leftBar,
    topBar,
    videoPlayer
  },
  data() {
    return {
      data: "onlinemeeting",
      id: this.$route.query.id,
      videoUrl: "",
      playerOptions: {
        height: "300",
        sources: [
          {
            type: "rtmp/mp4",
            src: "rtmp://live.hkstv.hk.lxdns.com/live/hks"
          }
        ],
        techOrder: ["flash"],
        autoplay: false,
        controls: true
      }
    };
  },
  methods: {
    returns() {
      history.go(-1);
    },
    getDetails() {
      const options = {
        mid: this.id
      };
      onlinemeeting.getLiveUrl(options).then(res => {
        if (res.code == 1) {
          this.$refs.videoPlayer.player.src(res.data.list.playUrl);
        }
      });
    }
  },
  mounted() {
    this.getDetails();
  }
};
</script>

<style>
</style>
